<template>
  <div class="user-center">
    <el-row :gutter="20">
      <!-- 左侧导航 -->
      <el-col :span="6">
        <el-card class="menu-card">
          <template #header>
            <div class="user-info">
              <el-avatar :size="64" :src="userInfo.avatar || defaultAvatar" />
              <h3>{{ userInfo.username }}</h3>
            </div>
          </template>
          <el-menu
              :default-active="activeMenu"
              class="user-menu"
              @select="handleMenuSelect"
          >
            <el-menu-item index="profile">
              <el-icon><User /></el-icon>
              <span>个人信息</span>
            </el-menu-item>
            <el-menu-item index="comments">
              <el-icon><ChatLineRound /></el-icon>
              <span>我的评论</span>
            </el-menu-item>
            <el-menu-item index="messages">
              <el-icon><ChatDotRound /></el-icon>
              <span>我的留言</span>
            </el-menu-item>
            <el-menu-item index="security">
              <el-icon><Lock /></el-icon>
              <span>账户安全</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>

      <!-- 右侧内容 -->
      <el-col :span="18">
        <!-- 个人信息 -->
        <el-card v-if="activeMenu === 'profile'" class="content-card">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
              <el-button type="primary" @click="handleEditProfile">编辑</el-button>
            </div>
          </template>
          <div class="profile-info">
            <div class="info-item">
              <span class="label">用户名：</span>
              <span>{{ userInfo.username }}</span>
            </div>
            <div class="info-item">
              <span class="label">性别：</span>
              <span>{{ userInfo.gender }}</span>
            </div>
            <div class="info-item">
              <span class="label">邮箱：</span>
              <span>{{ userInfo.email }}</span>
            </div>
            <div class="info-item">
              <span class="label">手机号：</span>
              <span>{{ userInfo.phone }}</span>
            </div>
            <div class="info-item">
              <span class="label">会员等级：</span>
              <el-tag :type="getLevelType(userInfo.level)">{{ userInfo.level }}</el-tag>
            </div>
            <div class="info-item">
              <span class="label">累计积分：</span>
              <span class="points">{{ userInfo.points }}</span>
            </div>
            <div class="info-item">
              <span class="label">注册时间：</span>
              <span>{{ formatDate(userInfo.createTime) }}</span>
            </div>
            <div class="info-item">
              <span class="label">生日：</span>
              <span>{{ userInfo.birthday ? formatDate(userInfo.birthday) : '未设置' }}</span>
            </div>
          </div>
        </el-card>

        <!-- 评论管理 -->
        <el-card v-if="activeMenu === 'comments'" class="content-card">
          <template #header>
            <div class="card-header">
              <span>我的评论</span>
            </div>
          </template>
          <div class="comment-list">
            <div v-if="comments.length === 0" class="empty-comments">
              <el-empty description="暂无评论" />
            </div>
            <div v-else class="comment-items">
              <div v-for="comment in comments" :key="comment.id" class="comment-item">
                <div class="comment-header">
                  <div class="product-info">
                    <img :src="comment.productImage || defaultProductImage" class="product-image" />
                    <span class="product-name">{{ comment.productName }}</span>
                  </div>
                  <div class="comment-actions">
                    <el-button
                        link
                        type="primary"
                        size="small"
                        @click="handleEditComment(comment)"
                    >
                      编辑
                    </el-button>
                    <el-button
                        link
                        type="danger"
                        size="small"
                        @click="handleDeleteComment(comment)"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
                <div class="comment-content">
                  <div class="comment-rating">
                    <el-rate v-model="comment.rating" disabled show-score />
                  </div>
                  <div class="comment-text">{{ comment.content }}</div>
                  <div v-if="comment.images" class="comment-images">
                    <el-image
                        v-for="(image, index) in comment.images.split(',')"
                        :key="index"
                        :src="image"
                        :preview-src-list="comment.images.split(',')"
                        fit="cover"
                        class="comment-image"
                    />
                  </div>
                </div>
                <div class="comment-footer">
                  <span class="comment-time">{{ formatDate(comment.createTime) }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 留言管理 -->
        <el-card v-if="activeMenu === 'messages'" class="content-card">
          <template #header>
            <div class="card-header">
              <span>我的留言</span>
              <el-button type="primary" @click="handleAddMessage">发布留言</el-button>
            </div>
          </template>
          <div class="message-list">
            <div v-if="messages.length === 0" class="empty-messages">
              <el-empty description="暂无留言" />
            </div>
            <div v-else class="message-items">
              <div v-for="message in messages" :key="message.id" class="message-item">
                <div class="message-header">
                  <span class="message-time">{{ formatDate(message.createTime) }}</span>
                  <div class="message-actions">
                    <el-button
                        link
                        type="primary"
                        size="small"
                        @click="handleEditMessage(message)"
                    >
                      编辑
                    </el-button>
                    <el-button
                        link
                        type="danger"
                        size="small"
                        @click="handleDeleteMessage(message)"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
                <div class="message-content">{{ message.content }}</div>
                <div v-if="message.reply" class="message-reply">
                  <span class="reply-label">管理员回复：</span>
                  <span class="reply-content">{{ message.reply }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 账户安全 -->
        <el-card v-if="activeMenu === 'security'" class="content-card">
          <template #header>
            <div class="card-header">
              <span>账户安全</span>
            </div>
          </template>
          <div class="security-list">
            <div class="security-item">
              <div class="security-info">
                <h4>登录密码</h4>
                <p>定期修改密码可以保护账号安全</p>
              </div>
              <el-button @click="handleChangePassword">修改密码</el-button>
            </div>
            <div class="security-item">
              <div class="security-info">
                <h4>手机绑定</h4>
                <p>已绑定：{{ maskPhone(userInfo.phone) }}</p>
              </div>
              <el-button @click="handleChangePhone">修改手机号</el-button>
            </div>
            <div class="security-item">
              <div class="security-info">
                <h4>邮箱绑定</h4>
                <p>已绑定：{{ maskEmail(userInfo.email) }}</p>
              </div>
              <el-button @click="handleChangeEmail">修改邮箱</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑个人信息对话框 -->
    <el-dialog v-model="profileDialogVisible" title="编辑个人信息" width="500px">
      <el-form :model="profileForm" :rules="profileRules" ref="profileFormRef" label-width="80px">
        <el-form-item label="头像">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/api/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :headers="{
              Authorization: `Bearer ${userStore.token}`
            }"
          >
            <img v-if="profileForm.avatar" :src="profileForm.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="profileForm.gender">
            <el-option label="男" value="MALE" />
            <el-option label="女" value="FEMALE" />
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="profileForm.email" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="profileForm.phone" />
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker v-model="profileForm.birthday" type="date" placeholder="请选择生日" style="width: 100%;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="profileDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitProfile" :loading="submitting">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="passwordDialogVisible" title="修改密码" width="500px">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPassword" :loading="submitting">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 发布/编辑留言对话框 -->
    <el-dialog
        v-model="messageDialogVisible"
        :title="messageForm.id ? '编辑留言' : '发布留言'"
        width="500px"
    >
      <el-form
          ref="messageFormRef"
          :model="messageForm"
          :rules="messageRules"
          label-width="80px"
      >
        <el-form-item label="留言内容" prop="content">
          <el-input
              v-model="messageForm.content"
              type="textarea"
              :rows="4"
              placeholder="请输入留言内容..."
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="messageDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitMessage" :loading="submitting">
            {{ messageForm.id ? '更新' : '发布' }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑评论对话框 -->
    <el-dialog
        v-model="commentDialogVisible"
        title="编辑评论"
        width="500px"
    >
      <el-form
          ref="commentFormRef"
          :model="commentForm"
          :rules="commentRules"
          label-width="80px"
      >
        <el-form-item label="评分" prop="rating">
          <el-rate v-model="commentForm.rating" show-score />
        </el-form-item>
        <el-form-item label="评论内容" prop="content">
          <el-input
              v-model="commentForm.content"
              type="textarea"
              :rows="4"
              placeholder="请输入评论内容..."
          />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              action="/api/upload"
              list-type="picture-card"
              :on-success="handleCommentImageSuccess"
              :on-remove="handleCommentImageRemove"
              :file-list="commentForm.fileList"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="commentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitComment" :loading="submitting">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User, ChatDotRound, ChatLineRound, Lock, Plus } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { getUserInfo, updateUserInfo, changePassword } from '@/api/user'
import { getCurrentUserMessages, addMessage, updateMessage, deleteMessage } from '@/api/message'
import { getComments, updateComment, deleteComment } from '@/api/comment'
import defaultAvatar from '@/assets/images/default-avatar.jpg'
import defaultProductImage from '@/assets/images/default-product.jpg'

const router = useRouter()
const userStore = useUserStore()
const activeMenu = ref('profile')
const userInfo = ref({})
const messages = ref([])
const editDialogVisible = ref(false)
const passwordDialogVisible = ref(false)
const messageDialogVisible = ref(false)
const currentMessage = ref(null)
const passwordFormRef = ref(null)

// 上传相关
const uploadUrl = `${import.meta.env.VITE_API_URL}/api/upload`

const editForm = ref({
  username: '',
  gender: '',
  email: '',
  phone: ''
})

const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const messageFormRef = ref(null)
const messageForm = ref({
  id: null,
  content: ''
})

const profileDialogVisible = ref(false)
const profileFormRef = ref(null)
const profileForm = ref({
  avatar: '',
  gender: '',
  email: '',
  phone: '',
  birthday: ''
})

const submitting = ref(false)

const profileRules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ]
}

const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const messageRules = {
  content: [
    { required: true, message: '请输入留言内容', trigger: 'blur' },
    { min: 2, max: 500, message: '长度在 2 到 500 个字符', trigger: 'blur' }
  ]
}

// 评论相关
const comments = ref([])
const commentDialogVisible = ref(false)
const commentFormRef = ref(null)
const commentForm = ref({
  id: null,
  productId: null,
  rating: 5,
  content: '',
  images: [],
  fileList: []
})

const commentRules = {
  rating: [
    { required: true, message: '请选择评分', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入评论内容', trigger: 'blur' },
    { min: 5, max: 500, message: '评论内容长度在 5 到 500 个字符', trigger: 'blur' }
  ]
}

onMounted(() => {
  loadUserInfo()
  if (activeMenu.value === 'messages') {
    loadMessages()
  }
})

const loadUserInfo = async () => {
  try {
    const res = await getUserInfo()
    userInfo.value = res.data
  } catch (error) {
    console.error(error)
    ElMessage.error('获取用户信息失败')
  }
}

const loadMessages = async () => {
  try {
    const res = await getCurrentUserMessages()
    messages.value = res.data
  } catch (error) {
    console.error(error)
    ElMessage.error('获取留言失败')
  }
}

const handleMenuSelect = (index) => {
  activeMenu.value = index
  if (index === 'messages') {
    loadMessages()
  } else if (index === 'comments') {
    loadComments()
  }
}

const handleEditProfile = () => {
  profileForm.value = {
    avatar: userInfo.value.avatar,
    gender: userInfo.value.gender,
    email: userInfo.value.email,
    phone: userInfo.value.phone,
    birthday: userInfo.value.birthday
  }
  profileDialogVisible.value = true
}

const submitProfile = async () => {
  if (!profileFormRef.value) return

  await profileFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        await updateUserInfo({
          phone: profileForm.value.phone,
          email: profileForm.value.email,
          gender: profileForm.value.gender,
          birthday: profileForm.value.birthday
        })
        ElMessage.success('更新成功')
        profileDialogVisible.value = false
        await loadUserInfo()
      } catch (error) {
        console.error(error)
        ElMessage.error('更新失败')
      } finally {
        submitting.value = false
      }
    }
  })
}

const handleChangePassword = () => {
  passwordForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
  passwordDialogVisible.value = true
}

const submitPassword = async () => {
  if (!passwordFormRef.value) return

  await passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        await changePassword(passwordForm.value)
        ElMessage.success('密码修改成功')
        passwordDialogVisible.value = false
        userStore.logout()
        router.push('/login')
      } catch (error) {
        console.error(error)
        ElMessage.error('密码修改失败')
      } finally {
        submitting.value = false
      }
    }
  })
}

const handleAvatarSuccess = (response) => {
  if (response.code === 200) {
    profileForm.value.avatar = response.data
  } else {
    ElMessage.error('上传失败')
  }
}

const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

const maskPhone = (phone) => {
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

const maskEmail = (email) => {
  const [name, domain] = email.split('@')
  return `${name.charAt(0)}***@${domain}`
}

const getLevelType = (level) => {
  switch (level) {
    case 'DIAMOND':
      return 'danger'
    case 'GOLD':
      return 'warning'
    case 'SILVER':
      return 'info'
    case 'BRONZE':
      return 'success'
    default:
      return 'info'
  }
}

const handleAddMessage = () => {
  messageForm.value = {
    id: null,
    content: ''
  }
  messageDialogVisible.value = true
}

const handleEditMessage = (message) => {
  messageForm.value = {
    id: message.id,
    content: message.content
  }
  messageDialogVisible.value = true
}

const handleDeleteMessage = async (message) => {
  try {
    await ElMessageBox.confirm('确定要删除该留言吗？', '提示', {
      type: 'warning'
    })
    await deleteMessage(message.id)
    ElMessage.success('删除成功')
    await loadMessages()
  } catch (error) {
    if (error !== 'cancel') {
      console.error(error)
      ElMessage.error('删除失败')
    }
  }
}

const submitMessage = async () => {
  if (!messageFormRef.value) return

  await messageFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        if (messageForm.value.id) {
          await updateMessage(messageForm.value)
        } else {
          await addMessage(messageForm.value)
        }
        ElMessage.success(messageForm.value.id ? '更新成功' : '发布成功')
        messageDialogVisible.value = false
        await loadMessages()
      } catch (error) {
        console.error(error)
        ElMessage.error(messageForm.value.id ? '更新失败' : '发布失败')
      } finally {
        submitting.value = false
      }
    }
  })
}

// 修改手机号
const handleChangePhone = () => {
  ElMessageBox.prompt('请输入新的手机号', '修改手机号', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^1[3-9]\d{9}$/,
    inputErrorMessage: '请输入正确的手机号'
  }).then(async ({ value }) => {
    try {
      await updateUserInfo({ ...userInfo.value, phone: value })
      ElMessage.success('手机号修改成功')
      loadUserInfo()
    } catch (error) {
      console.error(error)
      ElMessage.error('手机号修改失败')
    }
  }).catch(() => {})
}

// 修改邮箱
const handleChangeEmail = () => {
  ElMessageBox.prompt('请输入新的邮箱', '修改邮箱', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
    inputErrorMessage: '请输入正确的邮箱地址'
  }).then(async ({ value }) => {
    try {
      await updateUserInfo({ ...userInfo.value, email: value })
      ElMessage.success('邮箱修改成功')
      loadUserInfo()
    } catch (error) {
      console.error(error)
      ElMessage.error('邮箱修改失败')
    }
  }).catch(() => {})
}

// 加载评论列表
const loadComments = async () => {
  try {
    const res = await getComments()
    if (res.code === 200) {
      comments.value = res.data
    } else {
      ElMessage.error(res.message || '获取评论列表失败')
    }
  } catch (error) {
    console.error(error)
    ElMessage.error('获取评论列表失败')
  }
}

// 编辑评论
const handleEditComment = (comment) => {
  commentForm.value = {
    id: comment.id,
    productId: comment.productId,
    rating: comment.rating,
    content: comment.content,
    images: comment.images ? comment.images.split(',') : [],
    fileList: comment.images ? comment.images.split(',').map(url => ({
      url,
      name: url.split('/').pop()
    })) : []
  }
  commentDialogVisible.value = true
}

// 删除评论
const handleDeleteComment = async (comment) => {
  try {
    await ElMessageBox.confirm('确定要删除该评论吗？', '提示', {
      type: 'warning'
    })
    await deleteComment(comment.id)
    ElMessage.success('删除成功')
    await loadComments()
  } catch (error) {
    if (error !== 'cancel') {
      console.error(error)
      ElMessage.error('删除失败')
    }
  }
}

// 提交评论
const submitComment = async () => {
  if (!commentFormRef.value) return

  await commentFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        const commentData = {
          id: commentForm.value.id,
          productId: commentForm.value.productId,
          rating: commentForm.value.rating,
          content: commentForm.value.content,
          images: commentForm.value.images  // 保持为数组，让后端处理转换
        }
        const res = await updateComment(commentForm.value.id, commentData)

        if (res.code === 200) {
          ElMessage.success('更新成功')
          commentDialogVisible.value = false
          loadComments()
        } else {
          ElMessage.error(res.message || '更新失败')
        }
      } catch (error) {
        console.error('更新评论失败:', error)
        ElMessage.error(error.response?.data?.message || '更新失败')
      } finally {
        submitting.value = false
      }
    }
  })
}

// 评论图片上传成功
const handleCommentImageSuccess = (response) => {
  if (response.code === 200) {
    commentForm.value.images.push(response.data)
    commentForm.value.fileList.push({
      url: response.data,
      name: response.data.split('/').pop()
    })
  } else {
    ElMessage.error('上传失败')
  }
}

// 评论图片移除
const handleCommentImageRemove = (file) => {
  const index = commentForm.value.images.indexOf(file.url)
  if (index > -1) {
    commentForm.value.images.splice(index, 1)
    commentForm.value.fileList.splice(index, 1)
  }
}
</script>

<style scoped>
.user-center {
  padding: 20px;
}

.menu-card {
  margin-bottom: 20px;
}

.user-info {
  text-align: center;
  padding: 20px 0;
}

.user-info h3 {
  margin: 10px 0 0;
  font-size: 16px;
}

.user-menu {
  border-right: none;
}

.content-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-info {
  padding: 20px;
}

.info-item {
  margin-bottom: 15px;
}

.info-item .label {
  color: #666;
  margin-right: 10px;
}

.recent-orders {
  padding: 20px;
}

.order-item {
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 15px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.order-content {
  margin-bottom: 15px;
}

.order-product {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
}

.product-info h4 {
  margin: 0 0 10px;
}

.price {
  color: #f56c6c;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total {
  color: #f56c6c;
  font-weight: bold;
}

.actions {
  display: flex;
  gap: 10px;
}

.address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.address-card {
  cursor: pointer;
  transition: all 0.3s;
}

.address-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.address-card.is-default {
  border: 1px solid #409EFF;
}

.address-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.name-phone {
  margin: 0;
}

.name {
  font-weight: bold;
  margin-right: 10px;
}

.phone {
  color: #666;
}

.address-detail {
  margin: 0;
  color: #666;
}

.address-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.security-list {
  padding: 20px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.security-item:last-child {
  border-bottom: none;
}

.security-info h4 {
  margin: 0 0 10px;
}

.security-info p {
  margin: 0;
  color: #666;
}

.avatar-uploader {
  text-align: center;
}

.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.points {
  color: #f56c6c;
  font-weight: bold;
}

.message-list {
  padding: 20px;
}

.message-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.message-item {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 15px;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.message-time {
  color: #999;
  font-size: 14px;
}

.message-content {
  margin-bottom: 10px;
  line-height: 1.6;
}

.message-reply {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
}

.reply-label {
  color: #666;
  font-weight: bold;
}

.reply-content {
  color: #333;
}

.comment-list {
  padding: 20px;
}

.comment-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 15px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}

.product-name {
  font-weight: bold;
  color: #333;
}

.comment-content {
  margin-bottom: 10px;
}

.comment-rating {
  margin-bottom: 10px;
}

.comment-text {
  line-height: 1.6;
  color: #333;
  margin-bottom: 10px;
}

.comment-images {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.comment-image {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

.comment-footer {
  display: flex;
  justify-content: flex-end;
}

.comment-time {
  color: #999;
  font-size: 14px;
}
</style> 